# Introduction

Rsdoctor is a build analyzer tailored for the [Rspack](https://rspack.rs/) ecosystem and fully compatible with the [webpack](https://webpack.js.org/) ecosystem.

Rsdoctor is committed to being a one-stop, intelligent build analyzer that makes the build process transparent, predictable, and optimizable through visualization and smart analysis, helping development teams precisely identify bottlenecks, optimize performance, and improve engineering quality.

Rsdoctor supports all tools and frameworks based on Rspack or webpack, such as: [Docusaurus](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-rsdoctor), [Rspeedy (Lynx)](https://lynxjs.org/rspeedy/), [Storybook](https://github.com/rspack-contrib/storybook-rsbuild), [Next.js](https://nextjs.org/), [Nuxt](https://nuxt.com/), [Re.Pack](https://re-pack.dev/), [Modern.js](https://modernjs.dev/), [Rsbuild](https://rsbuild.rs/), [Rspress](https://rspress.rs/) and [Rslib](https://rslib.rs/).

<video
  src="https://assets.rspack.rs/others/assets/rsdoctor/rsdoctor-1.0-ui.mp4"
  style={{
    width: '100%',
    height: 'auto',
    maxHeight: '50vh',
    objectFit: 'cover',
    display: 'block',
  }}
  autoPlay={true}
  muted={true}
  controls={true}
  loop={true}
  playsInline
/>

## 🔥 Features

- **Compilation Visualization**: Rsdoctor visualizes the compilation behavior and time consumption, making it easy to view build issues.
- **Multiple Analysis Capabilities**: Rsdoctor supports build artifact, build-time analysis, and anti-degradation capabilities:
  - Build artifact support for resource lists and module dependencies, etc.
  - Build-time analysis supports Loader, Plugin, and Resolver building process analysis.
  - Build rules support duplicate package detection and ES Version Check, etc.
- **Support Custom Rules**: In addition to built-in build scan rules, Rsdoctor also supports users adding custom component scan rules based on the build data of Rsdoctor.

## 🛠️ Introduction

### ⭐️ Overview

- The overview page (i.e. the home page) can know **project configuration, diagnostic information, compilation information, and product status**.

![Overall](https://assets.rspack.rs/others/assets/rsdoctor/project-overall-1.jpg)

- In addition to the project overview, we also provide diagnostic functions, including compilation diagnostics and duplicate packages diagnostics. If your compilation and products hit the diagnostic rules we defined, the corresponding warning alerts will appear on the tool's home page, **where you can see the detailed reference path of duplicate packages**:

![Overall-Alerts](https://assets.rspack.rs/others/assets/rsdoctor/overall-alerts.png)

### ⭐️ Compilation analysis

Provides corresponding data and analysis functions for **Loaders, Plugins, and Module Resolve** to help you analyze problems in the compilation process.

#### Loader analysis

- This module mainly provides the function of data analysis such as input and output, estimated time consumption, and parameters within Rspack or webpack loaders.

<img
  src="https://assets.rspack.rs/others/assets/rsdoctor/loader-timeline-overall.png"
  style={{ margin: 'auto' }}
/>

<img
  src="https://assets.rspack.rs/others/assets/rsdoctor/loader-analysis-all.png"
  style={{ margin: 'auto' }}
/>

#### Plugin analysis

- This module mainly intercepts and collects data information such as the number of calls and estimated time consumption of Plugins.

<p>
  <img
    alt="bundle"
    src={'https://assets.rspack.rs/others/assets/rsdoctor/compile-plugin.jpg'}
    width="600px"
    style={{ margin: 'auto' }}
  />
</p>

#### Resolve analysis

- This module mainly provides path data and estimated time consumption for module resolution in a single file within the project. Rspack does not currently support this module.

<p>
  <img
    alt="bundle"
    src={'https://assets.rspack.rs/others/assets/rsdoctor/resolver.png'}
    width="700px"
    style={{ margin: 'auto' }}
  />
</p>

### ⭐️ Product analysis

- In the **Bundle Size** page, we can see an overview of the product data information of the current project, as well as analyze the size and reasons for duplicate package imports.

- In addition, we can also use the **Bundle Analysis** page to further analyze the relationship between the product and module in the current product, size data and other information, as well as the reasons for module introduction.

<p>
  <img
    alt="bundle"
    src={
      'https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-overall.png'
    }
    width="700px"
    style={{ margin: 'auto' }}
  />
</p>

### ⭐️ Bundle diff

::: tip
Support in progress...
:::

Using the bundle diff function provided by Rsdoctor, you can see the changes in **the size of resources, duplicate packages, Packages and other data in the product**, as well as **the size of module files and code changes in each resource**.

| ![bundle-diff-1](https://assets.rspack.rs/others/assets/rsdoctor/bundle-diff-1.png) | ![bundle-diff-2](https://assets.rspack.rs/others/assets/rsdoctor/bundle-diff-2.png) |
| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |

## 🧑‍💻 Community

Come and chat with us on [Discord](https://discord.gg/wrBPBT6rkM)! The Rstack team and users are active there, and we're always looking for contributions.
